<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <el-form ref="queryForm" inline size="small" :model="queryForm">
          <el-form-item label="学年" prop="year">
            <year-select v-model.number="queryForm.year"></year-select>
          </el-form-item>
          <el-form-item label="学期" prop="classId">
            <semester-select v-model.number="queryForm.semester"></semester-select>
          </el-form-item>
          <el-row v-permission="['admin']">
            <el-form-item label="所属班级" prop="classId">
              <my-cascader v-model="queryForm.classId" :options="classTreeList" :level="3"></my-cascader>
            </el-form-item>
            <el-form-item label="所在教室" prop="classroomId">
              <my-cascader v-model="queryForm.classroomId" :options="classroomTreeList" :level="2"></my-cascader>
            </el-form-item>
            <el-form-item label="课程" prop="courseId">
              <my-cascader v-model="queryForm.courseId" :options="courseTreeList" :level="2"></my-cascader>
            </el-form-item>
          </el-row>
          <el-button icon="el-icon-search" size="small" type="primary" @click="onClickSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQueryForm">重置</el-button>
        </el-form>
      </el-row>
      <el-row v-permission="['admin']" style="margin-top: 20px;">
        <el-button icon="el-icon-plus" size="small" type="primary" plain @click="onClickAdd">新增</el-button>
        <el-button icon="el-icon-edit" size="small" type="success" plain @click="onClickEdit()"
                   :disabled="editDisabled">修改
        </el-button>
        <el-button icon="el-icon-edit" size="small" type="danger" plain>删除</el-button>
      </el-row>
    </el-card>

    <div v-permission="['admin', 'teacher']">
      <div style="margin: 10px 0">
        <el-switch
          v-model="showMode.isList"
          active-text="列表展示"
          inactive-text="课程表展示">
        </el-switch>
      </div>
      <el-table
        v-loading="loading"
        :data="list"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
        v-show="showMode.isList"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="ID" width="95" prop="id"></el-table-column>
        <el-table-column label="班号" prop="classNum" width="50px"></el-table-column>
        <el-table-column label="课程" prop="course.name" width="200px"></el-table-column>
        <el-table-column label="班级" prop="course.eduClass.name" width="300px"></el-table-column>
        <el-table-column label="教室" width="150px" prop="classroom.name"></el-table-column>
        <el-table-column label="教师" prop="course.teacher.name"></el-table-column>
        <el-table-column label="学年学期">
          <template v-slot="scope">
            <year-semester-show :year="scope.row.course.year"
                                :semester="scope.row.course.semester"></year-semester-show>
          </template>
        </el-table-column>
        <el-table-column label="节次">
          <template slot-scope="scope">
            <span>周{{ scope.row.section.day }}({{ scope.row.section.startNum }} ~ {{
                scope.row.section.endNum
              }}节)</span>
          </template>
        </el-table-column>
        <el-table-column label="所在周" prop="week"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" v-if="roles[0] === 'admin' || roles[0] === 'teacher'">
          <template slot-scope="scope">
            <div v-permission="['admin']">
              <el-button type="text" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-table>
    </div>
    <time-table :events="timeTable" v-permission="['admin', 'teacher', 'student']" v-show="!showMode.isList"
                :is-teacher="'teacher' === roles[0]" ref="timeTable"></time-table>
    <el-drawer
      :title="drawer.title"
      :visible.sync="drawer.show"
      :before-close="onDrawerClose"
      size="50%">
      <el-form :rules="formRules" ref="editForm" label-width="auto" :model="form" size="medium">
<!--        <el-form-item label="班级" prop="classId">
          <my-cascader v-model="form.classId" :options="classTreeList" :level="2"></my-cascader>
        </el-form-item>-->
        <el-form-item label="节次" prop="sectionId">
          <el-select v-model="form.sectionId" filterable>
            <el-option :label="`周${item.day}(${item.startNum}-${item.endNum}节)`" :value="item.id"
                       v-for="(item, index) in sectionList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教室" prop="classroomId">
          <my-cascader v-model="form.classroomId" :options="classroomTreeList" :level="2"></my-cascader>
        </el-form-item>
      </el-form>
      <div class="form-drawer-footer">
        <el-button @click="onDrawerClose">取 消</el-button>
        <el-button type="primary" @click="onDrawerConfirm" :loading="drawer.confirmLoading">
          {{ drawer.confirmLoading ? '提交中 ...' : '确 定' }}
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {addSchedule, deleteOneSchedule, getScheduleList, getOneSchedule, updateSchedule, arrange} from "@/api/schedule";
import List from "@/mixins/list";
import {getClassTreeList, getCourseTreeList} from "@/api/dept";
import TimeTable from "@/views/schedule/components/time-table";
import MyCascader from "@/components/MyCascader";
import {getClassroomTreeList} from "@/api/build";
import YearSelect from "@/components/YearSelect";
import SemesterSelect from "@/components/SemesterSelect";
import YearSemesterShow from "@/components/YearSemesterShow/YearSemesterShow";
import {mapGetters, mapState} from "vuex";
import {getAllSection} from "@/api/section";
// import ScheduleValidator from "@/validator/ScheduleValidator";

export default {
  components: {YearSemesterShow, SemesterSelect, YearSelect, MyCascader, TimeTable},
  data() {
    return {
      queryListFun: getScheduleList,
      addFun: addSchedule,
      updateFun: updateSchedule,
      queryOneFun: getOneSchedule,
      deleteOneFun: deleteOneSchedule,
      createdLoadData: false,
      // validator: ScheduleValidator,
      queryForm: {
        year: null,
        semester: null,
        classId: null,
        classroomId: null,
        courseId: null
      },
      form: {
        sectionId: null,
        classroomId: null,
        name: ''
      },
      name: '专业',
      classroomTreeList: [],
      classTreeList: [],
      courseTreeList: [],
      showMode: {
        isList: false
      }
    }
  },
  mixins: [
    List
  ],
  computed: {
    ...mapGetters(['roles']),
    ...mapGetters(['enums']),
    ...mapGetters(['config']),
    timeTable() {
      console.log('time-table')
      const data = []
      for (let i of this.list) {
        data.push({
          raw: i,
          xq: i.section.day,
          title: i.course.name,
          class: 'sport',
          content: `${i.section.startNum}-${i.section.endNum}节<br />${i.course.eduClass != null ? i.course.eduClass.name + '<br />' : ''}${i.classroom.name}`,
          start: i.section.startNum,
          end: i.section.endNum
        })
      }
      console.log(data)
      return data
    }
  },
  mounted() {
    getClassroomTreeList().then(res => {
      const classroomTreeList = []
      for (let i of res.data) {
        const children = []
        for (let j of i.classrooms) {
          children.push({
            id: j.id,
            value: j.id,
            label: j.name,
          })
        }
        classroomTreeList.push({
          id: i.id,
          value: i.id,
          label: i.name,
          children
        })
      }
      this.classroomTreeList = classroomTreeList
    })
    getCourseTreeList().then(res => {
      const courseTreeList = []
      for (let i of res.data) {
        const children = []
        for (let j of i.courses) {
          children.push({
            id: j.id,
            value: j.id,
            label: j.name,
          })
        }
        courseTreeList.push({
          id: i.id,
          value: i.id,
          label: i.name,
          children
        })
      }
      this.courseTreeList = courseTreeList
    })
    getClassTreeList().then(res => {
      const classTreeList = []
      for (let i of res.data) {
        const children = []
        for (let j of i.majors) {
          const classChildren = []
          for (let k of j.classes) {
            classChildren.push({
              id: k.id,
              value: k.id,
              label: k.name,
            })
          }
          children.push({
            id: j.id,
            value: j.id,
            label: j.name,
            children: classChildren
          })
        }
        classTreeList.push({
          id: i.id,
          value: i.id,
          label: i.name,
          children
        })
      }
      this.classTreeList = classTreeList
    })
    getAllSection().then(res => {
      this.sectionList = res.data
    })
  }
}
</script>

<style scoped>

</style>
